<template>
    <div>
        <div class="totol">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="预约桌台" name="first">
                    <el-button type="primary" style="width: 120px" @click="dialogVisible = true">添加</el-button>
                    <el-dialog
                            title="提示"
                            :visible.sync="dialogVisible"
                            width="30%"
                                        >
                        <ul>
                            <li>姓名
                                <el-input v-model="Appointment.makeName" placeholder="请输入内容" style="width: 200px"></el-input>
                            </li>
                            <li>电话
                                <el-input v-model="Appointment.makePhone" placeholder="请输入内容" style="width: 200px"></el-input>
                            </li>
                            <li>桌台
                                <el-select v-model="Appointment.deskId" placeholder="请选择" style="width: 200px" @change="zhuhao()">
                                    <el-option
                                            v-for="item in options"
                                            :key="item.deskTypeId"
                                            :label="item.deskName"
                                            :value="item.deskTypeId">
                                    </el-option>
                                </el-select>
                            </li>
                            <li>
                                桌号
                                <el-select v-model="Appointment.deskCode" placeholder="请选择">
                                    <el-option
                                            v-for="item in zhuohao"
                                            :key="item.deskId"
                                            :label="item.deskCode"
                                            :value="item.deskId">
                                    </el-option>
                                </el-select>

                            </li>
                            <li>预约日期
                                <el-input v-model="Appointment.makeDate" placeholder="请输入内容" style="width: 200px"></el-input>
                            </li>
                        </ul>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="queryAdd(),dialogVisible = false">确 定</el-button>
                        </span>
                    </el-dialog>
                    <el-table
                            :data="tableData"
                            stripe
                            style="width: 100%">
                        <el-table-column
                                prop="makeName"
                                label="预约人姓名"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="makePhone"
                                label="电话">
                        </el-table-column>
                        <el-table-column
                                prop="deskName"
                                label="桌台">
                        </el-table-column>
                        <el-table-column
                                prop="deskCode"
                                label="桌号">
                        </el-table-column>
                        <el-table-column
                                prop="makeDate"
                                label="日期">
                        </el-table-column>
                        <el-table-column
                                prop="clerkName"
                                label="操作人">
                        </el-table-column>
                        <el-table-column
                                prop="address"
                                label="操作">
                            <template slot-scope="scope">
                                <el-button @click="queryDelete(scope.row.makePhone,scope.row.deskId)">取消预定</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            @size-change="querySelect()"
                            @current-change="querySelect()"
                            :current-page.sync="saleQueryBo.page.current"
                            :page-size.sync="saleQueryBo.page.size"
                            :page-sizes="[1, 3, 5, 7, 10]"
                            :total="totlCount" style="margin-left: 600px">
                    </el-pagination>
                </el-tab-pane>
            </el-tabs>

        </div>
    </div>
</template>

<script>
    export default {
        name: "Appointment",
        data() {
            return {
                dialogVisible: false,
                activeName: 'second',
                tableData: [],
                options: {
                    deskName:null,
                    deskTypeId:null
                },
                id:JSON.parse(sessionStorage.getItem("clerk")).clerkBusinessId,
                Appointment:{
                    makeName:null,
                    makePhone:null,
                    deskId:null,
                    makeDate:null,
                    buId:JSON.parse(sessionStorage.getItem("clerk")).clerkBusinessId,
                    deskCode:null,
                },
                saleQueryBo:{
                    page:{
                        current:1,
                        size:2
                    },
                    id:JSON.parse(sessionStorage.getItem("clerk")).clerkBusinessId
                },
                totlCount:null,
                quxiao:{
                    phone:null,
                    deskId:null,
                },
                zhuohao:{
                    deskId:1,
                    deskCode:3,
                    deskType:{
                        deskTypeId:1
                    }
                },
                zh: {
                    zhId:null,
                    id:JSON.parse(sessionStorage.getItem("clerk")).clerkBusinessId
                }
            }
        },
        methods:{
            zhuhao(){
                this.zh.zhId=this.Appointment.deskId
                this.$axios.post("administration/appointment/queryZhuoh",this.zh).then(response=>{
                    if (response.data!=null){
                        this.zhuohao=response.data;
                    }
                })
            },
            queryLb(){
                this.$axios.post("administration/appointment/zhuotai",this.id).then(response=>{
                    if (response.data!=null){
                        this.options=response.data;
                    }
                })
            },
            queryAdd(){
                let reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
                if(!reg.test(this.Appointment.makeDate)){
                    alert("日期格式不正确，正确格式为：2014-01-01")
                    this.dialogVisible=true;
                    return false;
                }
                let phone=/^1[3|4|5|7|8][0-9]{9}$/
                if (!phone.test(this.Appointment.makePhone)){
                    alert("手机号必须是11位数字")
                    this.dialogVisible=true;
                    return  false;
                }
                if(new Date(this.Appointment.makeDate).getTime()<new Date().getTime()){
                    alert("预定日期不能小于当前日期")
                    this.dialogVisible=true;
                    return  false;
                }
                if (this.Appointment.makeName==""){
                    alert("姓名不能为空")
                    this.dialogVisible=true;
                    return  false;
                }
                let name=/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/
                if (!name.test(this.Appointment.makeName)){
                    alert("姓名不能为数字，字母")
                    this.dialogVisible=true;
                    return  false;
                }
                this.$axios.post("administration/appointment/queryAdd",this.Appointment).then(response=>{
                    if (response.data==1){
                        alert("添加成功")
                        this.Appointment.makeName=""
                        this.Appointment.makeDate=""
                        this.Appointment.makePhone=""
                        this.Appointment.deskType=""
                        this.querySelect()
                    }
                })
            },
            querySelect(){
                this.$axios.post("administration/appointment/querySelect",this.saleQueryBo).then(response=>{
                    if (response.data!=null){
                        this.tableData=response.data.records
                        this.totlCount=response.data.total

                    }
                })
            },
            queryDelete(phone,deskId){
                let c=confirm("是否删除订单")
                if(c==true){
                    this.quxiao.deskId=deskId
                    this.quxiao.phone=phone
                    this.$axios.post("administration/appointment/queryDelete",this.quxiao).then(response=>{
                        if (response.data!=null){
                            alert("删除成功")
                            this.querySelect()
                        }
                    })
                }
            }
        },
        mounted() {
            this.queryLb()
            this.querySelect()
        }
    }
</script>

<style scoped>
    .totol{
        width: 81vw;
    }
    ul{
        line-height: 50px;
    }
    ul li{
        list-style: none;
    }

</style>